<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box{
      width:150px;
      height:150px;
      background-color:lightseagreen;
      margin:20px auto;
    }
    .backtop{
      position:fixed;
      right:20px;
      bottom:20px;
      width:45px;
      height:45px;
      line-height:45px;
      text-align:center;
      background-color:rgba(0,0,0,.6);
      border-radius:50%;
      color:#fff;
      font-size:30px;
      -webkit-tap-highlight-color:transparent;
      /* GPU加速 */
      transform:translate3d(0, 0, 0);
      /* transition:transform .3s; */
    }

  </style>
</head>
<body>
  

  <div class="box" id="box"></div>
  <a href="javascript:;" id="backtop" class='backtop'>&uarr;</a>
  <script src="hammer.js"></script>
  <!-- <script src="http://localhost:1337/vorlon.js"></script> -->
  <script>

    // 终端检测
    console.log(navigator.userAgent)

    var isMobile = navigator.userAgent.match(/android|iphone|ipad|ipod/i)
    if(isMobile){
      // location.href = 'https://m.imooc.com'
    }


    var boxEl = document.getElementById("box")
    var hammer = new Hammer(boxEl)
    hammer.on('swipe pan tap doubletap press pinch rotate', function(e){
      console.log(e.type)
    })
    // hammer.on('swipeleft', function(e){

    // })
    // hammer.on('swiperight', function(e){
      
    // })
  </script>
  <script>

    // var curPoint = {
    //   x: 0,
    //   y: 0
    // }

    
    // backtop.addEventListener('click', function(){
    //   move(this, -10 + curPoint.x, -10 + curPoint.y);
    //   curPoint.x += -10
    //   curPoint.y += -10
      
    // }, false)

    // function move(el, x, y){

    //   x = x || 0;
    //   y = y || 0;

    //   el.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';

    // }
    var backtop = document.getElementById('backtop')
    drag(backtop, {
      x: true,
      y: true
    })


    function drag(el, options){
      options.x = typeof options.x !== 'undefined' ? options.x : true;
      options.y = typeof options.y !== 'undefined' ? options.y : true;

      if(!options.x && !options.y) return;

      var curPoint = {
        x: 0,
        y: 0
      }

      var startPoint = {};

      el.addEventListener('touchstart', handleStart, false)
      el.addEventListener('touchmove', handleMove, false)
      el.addEventListener('touchend', handleEnd, false)

      function handleStart(e) {
        var touch = e.changedTouches[0]

        startPoint.x = touch.pageX
        startPoint.y = touch.pageY
      }

      function handleMove(e) {
        e.preventDefault()
        var touch = e.changedTouches[0]
        var diffPoint = {}
        var movePoint = {
          x: 0,
          Y: 0
        }

        diffPoint.x = touch.pageX - startPoint.x
        diffPoint.y = touch.pageY - startPoint.y
        if(options.x){
          movePoint.x = diffPoint.x + curPoint.x;
        }
        if(options.y){
          movePoint.y = diffPoint.y + curPoint.y;
        }
        move(el, movePoint.x, movePoint.y)

      }
      
      function handleEnd(e) {
        var touch = e.changedTouches[0]
        
        curPoint.x += touch.pageX - startPoint.x;
        curPoint.y += touch.pageY - startPoint.y;
      }
      function move(el, x, y){
        x = x || 0;
        y = y || 0;
        el.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
      }


    }

      // var boxEl = document.getElementById("box")

      // boxEl.ontouchstart = handleStart
      // boxEl.ontouchmove = handleMove
      // boxEl.ontouchend = handleEnd
      // boxEl.ontouchcancel = handleCancel
      // boxEl.addEventListener('touchstart', handleStart)
      // boxEl.addEventListener('touchmove', handleMove)
      // boxEl.addEventListener('touchend', handleEnd)
      // boxEl.addEventListener('touchcancel', handleCancel)

      // function handleStart(e) {
      //   console.log(e)
      // }
      // function handleMove() {
      //   console.log('handleMove')
      // }
      // function handleEnd() {
      //   console.log('handleEnd')
      // }
      // function handleCancel() {
      //   console.log('handleCancel')
      // }
  </script>
</body>
</html>